<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .header{
            width: 1200px;
            margin: 25px auto; /*注意空格分开而不是逗号*/
        }

        /*子菜单不显示*/
        .header .menu ul{
            display: none;
            list-style: none; /*去点*/
            /*关联banner布局*/
            position: absolute;
            width: 80px;
            opacity: 0.5; /*透明效果*/
            background-color: white;
        }

        /*设置菜单和logo位置*/
        .header .logo{
            float: left;
            position: relative;
        }
        /*菜单位置*/
        .header .menu{
            float: left;
            position: relative;
            margin-top: 12px;
            margin-left: 16px;
        }
        /*menu浮动事件 菜单折叠*/
        /*.header .menu:hover ul{
            display: block;
        }*/
        /*---------------菜单样式设置---------------*/
        /*菜单间距*/
        .header .menu ul li{
            margin-top: 20px;
            text-align: center; /*和菜单标题同时居中*/
        }
        /*菜单边框*/
        .header .menu .menu_title{
            border-bottom: 1px solid black;
            padding-bottom: 20px;
            width: 80px;
            text-align: center;
        }
        /*超级链接去下划线*/
        a{
            text-decoration: none;
        }
        /*---------------login样式设置---------------*/
        .header .auth{
            float: right;
        }
        .header .auth ul li{
            float: left;
            margin-right: 70px;
            margin-top: 12px;    /*上边距*/
            list-style: none;
        }
        body {
            margin: 4px;
            font-family: Helvetica;

            /* Centering & Limit Width */
            margin: auto;
            width: 720px;
        }

        .masonry {
            column-count: 4;
            column-gap: 0;
            width: 1200px;
            margin: 25px auto;
        }

        .item {
            padding: 2px;
            position: relative;
            z-index: 0;
            /*counter-increment: item-counter;*/
            transition: all 0.5s;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;

        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .item::after {
            position: absolute;
            display: block;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color: #fff;
            /*content: counter(item-counter);*/
        }

        .item:hover{
            z-index: 9999;
            transform:scale(1.2);
            /*-webkit-transform:scale(1.2);*/
            /*-moz-transform:scale(1.2);*/
            /*-o-transform:scale(1.2);*/
            /*-ms-transform:scale(1.2);*/
        }
    </style>
</head>
<body>
<!--    <h1>ITEM LIST</h1>-->
    <div class="header">
        <!-- 设置logo -->
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!-- 设置菜单 -->
        <div class="menu" onmouseleave="show_menu1()">
            <div class="menu_title" onclick="show_menu()">
                <a href="#">内容分类</a></div>
            <ul id="menu1" >
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <!-- 设置用户登录 -->
        <div class="auth">
            <ul>
                <li><a href="#">注册</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>

    <div class="masonry" id="app">
        <div v-for="item in info" class="item">
            <img :src="item.img"/>

        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=1">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/520?random=2">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/520?random=3">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=4">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/520?random=5">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/520?random=6">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=7">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/520?random=8">
        </div>

    </div>

<!--    <div id="app">-->
<!--        <table class="table">-->
<!--            <th scope="col">外观</th><th scope="col">名称</th><th scope="col">描述</th><th scope="col">价格</th><th scope="col">操作</th>-->
<!--            <tr v-for="item in info">-->
<!--                <td><img :src="item.img"/></td>-->
<!--&lt;!&ndash;                <td>{{item.img}}</td>&ndash;&gt;-->
<!--                <td>{{item.itemname}}</td>-->
<!--                <td>{{item.description}}</td>-->
<!--                <td>{{item.price}}</td>-->
<!--&lt;!&ndash;                <td>&ndash;&gt;-->
<!--&lt;!&ndash;                    <button type="button" id="add" :onclick="add(item.id)">添加</button>&ndash;&gt;-->
<!--&lt;!&ndash;                </td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>&ndash;&gt;-->
<!--&lt;!&ndash;                    <a href="#" :onclick="add(item.id) ">添加</a>&ndash;&gt;-->
<!--&lt;!&ndash;                </td>&ndash;&gt;-->
<!--            </tr>-->
<!--        </table>-->
<!--    </div>-->

    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    info: null
                }
            },
            mounted () {
                axios
                    .post('/item/list')
                    .then(response => (this.info = response.data))
            }
        })

        function add(itemid) {
            $.post("/cart/add", {"itemid":itemid}, function (data) {
                if (data) {
                    alert("添加成功");
                }
            });
        }
    </script>
</body>
</html>



<!--		<div class="img_content">-->
<!--			<ul>-->
<!--				<li href="#">-->
<!--					<img src="image/wumingnvlang.jpg" class="img_li">-->
<!--					<div class="info">-->
<!--						<h3>无名女郎</h3>-->
<!--						<p>-->
<!--							图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块-->
<!--						</p>-->
<!--						<div class="img_btn">-->
<!--							&lt;!&ndash; 价格，购买logo &ndash;&gt;-->
<!--							<div class="price">¥ 2300</div>-->
<!--							&lt;!&ndash; 购物车按钮 &ndash;&gt;-->
<!--							<div class="btn">-->
<!--								<a href="#" class="cart">-->
<!--									<img src="image/cart.svg">-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--&lt;!&ndash;					<div class="image middle">&ndash;&gt;-->
<!--&lt;!&ndash;						<img src="image/wumingnvlang.jpg" alt="" />&ndash;&gt;-->
<!--&lt;!&ndash;						<div class="image-content">&ndash;&gt;-->
<!--&lt;!&ndash;							<h1>Image Title</h1>&ndash;&gt;-->
<!--&lt;!&ndash;							<div class="icons">&ndash;&gt;-->
<!--&lt;!&ndash;								<a href="" class="icon fas fa-heart"></a>&ndash;&gt;-->
<!--&lt;!&ndash;								<a href="" class="icon fas fa-comment"></a>&ndash;&gt;-->
<!--&lt;!&ndash;								<a href="" class="icon fas fa-share"></a>&ndash;&gt;-->
<!--&lt;!&ndash;							</div>&ndash;&gt;-->
<!--&lt;!&ndash;						</div>&ndash;&gt;-->
<!--&lt;!&ndash;					</div>&ndash;&gt;-->
<!--				</li>-->

<!--				<li>-->
<!--					<img src="image/wumingnvlang.jpg" class="img_li">-->
<!--					<div class="info">-->
<!--						<h3>无名女郎</h3>-->
<!--						<p>-->
<!--							图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块-->
<!--						</p>-->
<!--						<div class="img_btn"> -->
<!--							&lt;!&ndash; 价格，购买logo &ndash;&gt;-->
<!--							<div class="price">¥ 2300</div>-->
<!--							&lt;!&ndash; 购物车按钮 &ndash;&gt;-->
<!--							<div class="btn">-->
<!--								<a href="#" class="cart">-->
<!--									<img src="image/cart.svg">-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</li>-->

<!--				<li>-->
<!--					<img src="image/wumingnvlang.jpg" class="img_li">-->
<!--					<div class="info">-->
<!--						<h3>无名女郎</h3>-->
<!--						<p>-->
<!--							图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块-->
<!--						</p>-->
<!--						<div class="img_btn"> -->
<!--							&lt;!&ndash; 价格，购买logo &ndash;&gt;-->
<!--							<div class="price">¥ 2300</div>-->
<!--							&lt;!&ndash; 购物车按钮 &ndash;&gt;-->
<!--							<div class="btn">-->
<!--								<a href="#" class="cart">-->
<!--									<img src="image/cart.svg">-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</li>-->

<!--				<li>-->
<!--					<img src="image/wumingnvlang.jpg" class="img_li">-->
<!--					<div class="info">-->
<!--						<h3>无名女郎</h3>-->
<!--						<p>-->
<!--							图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块-->
<!--						</p>-->
<!--						<div class="img_btn"> -->
<!--							&lt;!&ndash; 价格，购买logo &ndash;&gt;-->
<!--							<div class="price">¥ 2300</div>-->
<!--							&lt;!&ndash; 购物车按钮 &ndash;&gt;-->
<!--							<div class="btn">-->
<!--								<a href="#" class="cart">-->
<!--									<img src="image/cart.svg">-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</li>-->

<!--				<li>-->
<!--					<img src="image/wumingnvlang.jpg" class="img_li">-->
<!--					<div class="info">-->
<!--						<h3>无名女郎</h3>-->
<!--						<p>-->
<!--							图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块-->
<!--						</p>-->
<!--						<div class="img_btn"> -->
<!--							&lt;!&ndash; 价格，购买logo &ndash;&gt;-->
<!--							<div class="price">¥ 2300</div>-->
<!--							&lt;!&ndash; 购物车按钮 &ndash;&gt;-->
<!--							<div class="btn">-->
<!--								<a href="#" class="cart">-->
<!--									<img src="image/cart.svg">-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</li>-->

<!--				<li>-->
<!--					<img src="image/wumingnvlang.jpg" class="img_li">-->
<!--					<div class="info">-->
<!--						<h3>无名女郎</h3>-->
<!--						<p>-->
<!--							图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块-->
<!--						</p>-->
<!--						<div class="img_btn"> -->
<!--							&lt;!&ndash; 价格，购买logo &ndash;&gt;-->
<!--							<div class="price">¥ 2300</div>-->
<!--							&lt;!&ndash; 购物车按钮 &ndash;&gt;-->
<!--							<div class="btn">-->
<!--								<a href="#" class="cart">-->
<!--									<img src="image/cart.svg">-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</li>-->
<!--			</ul>-->
<!--			-->
<!--		</div>-->